<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套路由</title>
    <link type="text/css" rel="stylesheet"
          href="./bootstrap-4.4.1-dist/css/bootstrap.css">
</head>
<style>
    /* styles.css */
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f8f9fa;
    }

    .container {
        max-width: 80%; /* 限制容器的最大宽度 */
    }

    .list-group {
        border-radius: 10px; /* 为列表组添加圆角 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    }

    .dropdown-menu {
        border: none; /* 移除下拉菜单的边框 */
        background-color: #fff; /* 设置背景颜色 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    }

    .list-group-item a {
        color: #007bff; /* 链接颜色 */
        text-decoration: none; /* 移除下划线 */
    }

    .list-group-item a:hover {
        color: #0056b3; /* 悬停时的颜色 */
    }
    .show{
        display: none;
    }
    .dshListN{
        display: none;
    }
</style>
<body>
<div id="app">
    <router-view></router-view>
</div>
<!-- 一级菜单：董事会 -->
<template id="dsh">
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-6">
                <ul class="list-group">
                    <li class="list-group-item">
                        <router-link to="/dsh-list">董事会</router-link>
                        <router-view></router-view>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<!--二级菜单-->
<template id="dshList">
    <ul class="list-group">
        <li class="list-group-item">
            <router-link to="/dshListOne"><span @click="changes(1)">市场经理</span></router-link>
            <router-view :class="{dshListN:l}"></router-view>
        </li>
        <li class="list-group-item">
            <router-link to="/dshListTwo"><span  @click="changes(2)">人事经理</span></router-link>
            <router-view :class="{dshListN:k}"></router-view>
        </li>
        <li class="list-group-item">
            <router-link to="/dshListThree"><span  @click="changes(3)">产品经理</span></router-link>
            <router-view :class="{dshListN:h}"></router-view>
        </li>
    </ul>
</template>

<!--三级菜单-->

<!--市场经理-->
<template id="dshListOne">
    <ul class="list-group">
        <li class="list-group-item">
            <a href="#">市场部</a>
        </li>
        <li class="list-group-item">
            <router-link to="/dshListOneTowList"><span  @click="changes(2)">设计部</span></router-link>
            <router-view :class="{dshListN:two}"></router-view>
        </li>
        <li class="list-group-item">
            <a href="#">业务部</a>
        </li>
        <li class="list-group-item">
            <router-link to="/dshListOneFourList"><span  @click="changes(4)">客服部</span></router-link>
            <router-view :class="{dshListN:four}"></router-view>
        </li>
    </ul>
</template>
<!--人事经理-->
<template id="dshListTwo">
    <ul class="list-group">
        <li class="list-group-item">
            <a href="#">财务部</a>
        </li>
        <li class="list-group-item">
            <a href="#">行政部</a>
        </li>
        <li class="list-group-item">
            <a href="#">人力资源部</a>
        </li>
    </ul>
</template>
<!--产品经理-->
<template id="dshListThree">
    <ul class="list-group">
        <li class="list-group-item">
            <a href="#">网络部</a>
        </li>
        <li class="list-group-item">
            <router-link to="/dshListThreeTwoList"><span  @click="changes(4)">开发部</span></router-link>
            <router-view :class="{dshListN:two}"></router-view>
        </li>
        <li class="list-group-item">
            <a href="#">技术部</a>
        </li>
    </ul>
</template>

<!--四级菜单-->

<!--设计部-->
<template id="dshListOneTowList">
    <ul class="list-group">
        <li class="list-group-item">
            <a href="#">设计一部</a>
        </li>
        <li class="list-group-item">
            <a href="#">设计二部</a>
        </li>
    </ul>
</template>
<!--客服部-->
<template id="dshListOneFourList">
    <ul class="list-group">
        <li class="list-group-item">
            <a href="#">客户服务</a>
        </li>
        <li class="list-group-item">
            <a href="#">技术支持</a>
        </li>
    </ul>
</template>

<!--客服部-->
<template id="dshListThreeTwoList">
    <ul class="list-group">
        <li class="list-group-item">
            <a href="#">开发一部</a>
        </li>
        <li class="list-group-item">
            <a href="#">开发二部</a>
        </li>
    </ul>
</template>
</body>
</html>
<script type="module">
    import {} from './js/vue.js'
    import {} from './js/vue-router.js'

    // 定义菜单组件
    let dsh = {template: '#dsh'}

    let dshList = {
        template: '#dshList',
        data() {
            return {
                l: true,
                h: true,
                k: true
            }
        },
        methods: {
            changes(e){
                if (e === 1){
                    this.l = false
                    this.k = true
                    this.h = true
                }
                if (e === 2){
                    this.l = true
                    this.k = false
                    this.h = true
                }
                if (e === 3){
                    this.l = true
                    this.k = true
                    this.h = false
                }
            }
        }
    }

    let dshListOne = {
        template: '#dshListOne',
        data() {
            return {
                two: true,
                four: true
            }
        },
        methods: {
            changes(e){
                if (e === 2){
                    this.two = false
                    this.four = true
                }
                if (e === 4){
                    this.two = true
                    this.four = false
                }
            }
        }
    }
    let dshListTwo = {
        template: '#dshListTwo'
    }
    let dshListThree = {
        template: '#dshListThree',
        data() {
            return {
                two: false
            }
        },
        methods: {
            changes(e){
                if (e === 2){
                    this.two = true
                }
            }
        }
    }
    let dshListOneTowList = {
        template: '#dshListOneTowList'
    }
    let dshListOneFourList = {
        template: '#dshListOneFourList'
    }
    let dshListThreeTwoList = {
        template: '#dshListThreeTwoList'
    }
    //定义路由
    const routes = [
        {path: '/', redirect: '/dsh'},
        {
            path: '/dsh', component: dsh,
            children: [
                {
                    path: '/dsh-list', component: dshList,
                    children: [
                        {path: '/dshListOne', component: dshListOne,
                            children: [
                                {path: '/dshListOneTowList', component: dshListOneTowList},
                                {path: '/dshListOneFourList', component: dshListOneFourList}
                            ]
                        },
                        {path: '/dshListTwo', component: dshListTwo},
                        {path: '/dshListThree', component: dshListThree,
                            children: [
                                {path: '/dshListThreeTwoList', component: dshListThreeTwoList}
                            ]
                        }
                    ]
                }
            ]
        }
    ]

    // 创建路由
    const router = new VueRouter({
        routes
    })


    new Vue({
        el: '#app',
        data: {},
        router
    })
</script>